<template>
  <!-- 这里就是input框下面的整个div -->
    <ul>
        <li v-for="item in restaurantList">
            <div class="bottom" @click="shopMsg(item.rid)">
                  <div class="left">
                    <img
                      class="imgs"
                      :src="item.url"
                      alt=""
                    />
                  </div>
                  <div class="right">
                      <div class="shang">
                          <span class="span1">{{item.restaurantName}}</span><br />
                          <div class="span2">{{item.remark}}</div>
                      </div>
                  </div>
            </div>
        </li>
    </ul>
</template>

<script>
export default {
  props:{
    restaurantList: {
        type: Array,
        required: true
    }
  },
  data() {
    return {
        restaurantList1:this.restaurantList,
      id: "",
    };
  },
  methods: {
    //从数据库中查询的id
    shopMsg(id) {
      this.$router.push({
        name: "msg",
        params: { id: id },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.imgs {
  width: 100%;
  height: 100%;
}
.span2 {
  margin-top: 2.6667vw;
}
.span1 {
  font-size: 4.3667vw;
}
.shang {
  width: 80%;
  height: 15.3333vw;
  // border: red 1px solid;
  margin-top: 4.6667vw;
  margin-left: 5vw;
}
.right {
  width: 75%;
  height: 100%;
  // background-color: green;
  float: left;
}
.left {
  width: 25%;
  height: 100%;
  // background-color: yellow;
  float: left;
}
.bottom {
  width: 90%;
  height: 24.6667vw;
  // background-color: aquamarine;
  margin-top: 2.6667vw;
  margin-left: 5%;
  overflow: hidden;
  border: #e74e40 1px solid;
}
</style>